{% extends "base.html" %}

{% block title %}阅读 {{ book.title }} - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-12">
            <div class="card ink-card mb-4">
                <div class="card-header ink-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ book.title }}</h5>
                    <a href="{{ url_for('view_book', book_id=book.id) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> 返回图书详情
                    </a>
                </div>
                <div class="card-body">
                    {% set file_ext = book.file_path.split('.')[-1].lower() %}
                    
                    {% if file_ext == 'epub' %}
                    <!-- EPUB 阅读器 -->
                    <div id="epub-reader" class="ebook-container">
                        <div class="alert alert-info mb-4">
                            <i class="fas fa-info-circle"></i> EPUB 格式需要特殊的阅读器组件，目前暂不支持在线阅读。您可以下载后使用专业的电子书软件阅读。
                        </div>
                        <div class="text-center">
                            <a href="{{ url_for('download_book', book_id=book.id) }}" class="btn btn-primary">
                                <i class="fas fa-download"></i> 下载此电子书
                            </a>
                        </div>
                        
                        <!-- 书籍信息 -->
                        <div class="book-info mt-5">
                            <div class="row">
                                <div class="col-md-4">
                                    {% if book.cover_path %}
                                    <img src="{{ url_for('static', filename='covers/' + book.cover_path) }}" 
                                         class="img-fluid rounded" alt="{{ book.title }}">
                                    {% else %}
                                    <div class="default-cover text-center py-5 bg-light rounded">
                                        <i class="fas fa-book fa-4x text-muted"></i>
                                        <h5 class="mt-3">{{ book.title }}</h5>
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="col-md-8">
                                    <h4>{{ book.title }}</h4>
                                    <h6 class="text-muted">{{ book.author }}</h6>
                                    <p>{{ book.description or '暂无简介' }}</p>
                                    <div>
                                        {% if book.category %}
                                        <span class="badge bg-primary">{{ book.category.name }}</span>
                                        {% endif %}
                                        {% if book.tags %}
                                        {% for tag in book.tags.split(',') %}
                                        <span class="badge bg-secondary">{{ tag }}</span>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {% elif file_ext == 'mobi' %}
                    <!-- MOBI 阅读器 -->
                    <div id="mobi-reader" class="ebook-container">
                        <div class="alert alert-info mb-4">
                            <i class="fas fa-info-circle"></i> MOBI 格式需要特殊的阅读器组件，目前暂不支持在线阅读。您可以下载后使用专业的电子书软件（如Kindle）阅读。
                        </div>
                        <div class="text-center">
                            <a href="{{ url_for('download_book', book_id=book.id) }}" class="btn btn-primary">
                                <i class="fas fa-download"></i> 下载此电子书
                            </a>
                        </div>
                        
                        <!-- 书籍信息 -->
                        <div class="book-info mt-5">
                            <div class="row">
                                <div class="col-md-4">
                                    {% if book.cover_path %}
                                    <img src="{{ url_for('static', filename='covers/' + book.cover_path) }}" 
                                         class="img-fluid rounded" alt="{{ book.title }}">
                                    {% else %}
                                    <div class="default-cover text-center py-5 bg-light rounded">
                                        <i class="fas fa-book fa-4x text-muted"></i>
                                        <h5 class="mt-3">{{ book.title }}</h5>
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="col-md-8">
                                    <h4>{{ book.title }}</h4>
                                    <h6 class="text-muted">{{ book.author }}</h6>
                                    <p>{{ book.description or '暂无简介' }}</p>
                                    <div>
                                        {% if book.category %}
                                        <span class="badge bg-primary">{{ book.category.name }}</span>
                                        {% endif %}
                                        {% if book.tags %}
                                        {% for tag in book.tags.split(',') %}
                                        <span class="badge bg-secondary">{{ tag }}</span>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.ink-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ink-header {
    background-color: #f8f9fa;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.ebook-container {
    min-height: 600px;
}

.default-cover {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>
{% endblock %} 